<template>
	<div class="header">
		<img :src="`http://127.0.0.1/api/public/showimg/${user.pic}`" />
		<div class="uname">
		<h2 style="font-weight: 500;">{{user.name}}</h2>
		<p>Lv.0
		<i style="color: #c5c5c5;font-weight: 1000;" class="el-icon-arrow-right"></i>
		</p>
		</div>
		<router-link to="/login">
			<i class="el-icon-arrow-right"></i>
		</router-link>
	</div>
</template>

<script>
	export default {
		name: 'MobilePersonHeader',
		props: ['person'],
		data() {
			return {
				user: {
					name: '',
					account: '',
					pic: ''
					}
			}
		},
		mounted() {
			this.user.name = this.$store.state.name
			this.user.account = this.$store.state.account
			this.user.pic = this.$store.state.pic
		}
	}
</script>

<style scoped>
	.header {
		width: 90%;
		height: 8rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.header img {
		width: 4.5rem;
		height: 4.5rem;
		border-radius: 50%;
	}
	
	.header .uname {
		width: 70%;
	}
	
	.header .uname p {
		width: 20%;
		background-color: #8d8d8d;
		border-radius: 0.4rem;
		color: white;
		text-align: center;	
	}
	
	.header a {
		font-size: 1.5rem;
		color: #b6b6b6;
		
	}
	
</style>